<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="cropper-master/dist/cropper.css">
	<style>
		#image
		{
			width: 100%;
		}
	</style>
</head>
<body>
	<div style="width: 800px;">
		<img src="img/testPic.jpg" alt="ClipPicture" id="image">
	</div>
	<div>
		<button id="submit">提交图片</button>
	</div>

	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="cropper-master/dist/cropper.js"></script>
	<script>
		$(document).ready(function(){
			var options = {
				aspectRatio: 1/1,
				ViewMode: 1,
				dragMode: "move",
				build:function(e){

				},
				background: true,
				movable: true
			};
			$("#image").cropper(options);

			$("#submit").click(function(){
				$("#image").cropper("getCroppedCanvas",{
					width: 100,
					height: 100,
					beforeDrawImage : function(canvas){
						const context = canvas.getContext("2d");
						context.imageSmoothingEnabled = false;
						context.imageSmoothingQuality = "high";
					}
				});

				$("#image").cropper("getCroppedCanvas").toBlob(function(blob){
					var formData = new FormData();

					formData.append("croppedImage",blob);

					$.ajax("http://192.168.155.1:8080/test",{
						method:"POST",
						data: formData,
						processData: false,
						contentType: false,
						success:function(){
							alert("上传成功!");
						},
						error:function(){
						alert("上传失败!");
						}
					});
				});
			});

		});
	</script>
</body>
</html>